<template>
	<view class="page">
		<navbar title="蜂竞技-极速拼词-创建房间" />

		<!-- 创建房间确认弹框 -->
		<selectContentView v-if="showPromptbox" :msg="msg" confirmTitle="确认" cancelTitle="取消" @confirm="confirmCreate"
			@cancel="showPromptbox=false"></selectContentView>

		<view class="container">
			<view class="page-h1 hzgb">{{user_info.username}}的房间</view>
			<view class="pwd">
				<uv-input class="pwd-input" :type="pwdType" placeholder="设置房间密码"
					placeholderStyle="font-size: 14px;text-align: center;" v-model="pwd"></uv-input>
				<!-- <image class="eye" @click="eyeFn()"
					:src="'../../../static/image/icon_pwd' + (pwdType === 'text' ? '' : '_hide') + '.png'" mode="">
				</image> -->
			</view>
			<!-- <view class="page-h3">选择组别
				<view class="btn-en">Select Group</view>
			</view> -->
			<view class="tabs">
				<view class="tab-item" :class=" activeTab == 0 ? 'activeTab' : ''" @click="changeTabFn(0)">选择组别<view
						class="btn-en">Select Group</view>
				</view>
				<view class="tab-item" :class=" activeTab == 1 ? 'activeTab' : ''" @click="changeTabFn(1)">选择计划<view
						class="btn-en">Select Study Plan</view>
				</view>
			</view>
			<view class="flex" v-if="activeTab === 0">
				<view class="float" v-for="(item, index) in type_list" :key="index">
					<view @click="fnSelectType(item, index)" class="level-item"
						:class="current_type_info.id === item.id ? 'active' : ''">
						<view class="level-icon">
							<image class="icon" src="/static/image/fengyongyanxuan/game-jspc.png" mode="heightFix">
							</image>
						</view>
						<view class="label">{{item.name}}
							<view class="title-en-common-10">{{ item.enName }}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="activeTab === 1">
				<view class="no_data" v-if="!plan_list.length">
					<image class="img" src="../../../static/image/noDataPlaceImage.png" mode="widthFix"></image>
				</view>
				<view class="plan-item" :class="activePlan === i ? 'active' : ''" @click="choosePlan(item, i)"
					v-for="(item,i) in plan_list" :key="i">
					<view class="plan-name">{{ item.name }}</view>
					<view>
						<view>{{ item.typeStr }}</view>
						<view class="plan-en">{{ item.type }}</view>
					</view>
				</view>
			</view>
			<view class="page-h3">选择人数
				<view class="btn-en"> Select Number of spellers</view>
			</view>
			<view class="card">
				<view class="slider_box">
					<uv-slider v-model="people_num" @change="changePeopleNum" :min="game_config.min_people_num"
						:max="game_config.max_people_num" blockSize="28" step="1" activeColor="#f0d76f"
						inactiveColor="#fff" block-color="#deba5e" blockStyle="height:70px"></uv-slider>
					<view class="slider_num">
						<view>{{game_config.min_people_num}}</view>
						<view>{{game_config.max_people_num}}</view>
					</view>
					<view class="slider_btn">
						{{people_num}}人
					</view>
				</view>
			</view>
			<view class="page-h3" style="height: 50px;"></view>
			<view class="btns">
				<view class="btn btn1" @click="fnCancelCreate()">取消
					<view class="btn-en">Cancel</view>
				</view>
				<view class="btn btn2" @click="fnCreateRoom()">确认创建
					<view class="btn-en">Confirm Create</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navbar from '../../../components/gamesNav.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			navbar
		},
		data() {
			return {
				game_mode: '',
				game_config: {},

				pwd: '',
				people_num: 2,
				pwdType: 'text',

				current_type_info: {
					// 'id': 4001,
					// 'name': '小学组',
					// enName: 'Primary School Group',
					// 'status': 1
				},
				activeTab: 0,
				activePlan: null,
				plan_list: [],
				planTypeList: [{
						key: 'week',
						value: '周计划'
					},
					{
						key: 'month',
						value: '月计划'
					},
					{
						key: 'semester',
						value: '学期计划'
					},
					{
						key: 'year',
						value: '学年计划'
					}
				],
				type_list: [{
					'id': 4001,
					'name': '小学组',
					enName: 'Primary School Group',
					'status': 1,
					level: 1
				}, {
					'id': 4002,
					'name': '初中组',
					enName: 'Middle School Group',
					'status': 0,
					level: 2
				}, {
					'id': 4003,
					'name': '高中组',
					enName: 'High School Group',
					'status': 0,
					level: 3
				}, {
					'id': 4000,
					'name': '混合组',
					enName: 'Mixed Group',
					'status': 1,
					level: 4
				}],

				user_info: {},
				game_info: {},
				showPromptbox: false,
				userLevel: 0
			};
		},
		onLoad(options) {
			var that = this;
			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));
			that.game_info = JSON.parse(decodeURIComponent(options.game_info));
			that.game_mode = options.game_mode;
			console.log(that.user_info, that.game_info);

			this.setCurrentLevel()

			console.log('创建房间：', that.game_info, that.game_mode)

			that.getGameConfigInfo();
			that.getPlanList()
		},
		mounted() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		onShow() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		methods: {
			// 设置当前选手组别
			setCurrentLevel() {
				// 当前选手组别
				const grade = Number(this.user_info.grade)
				this.userLevel = grade < 7 ? 1 : grade < 10 ? 2 : grade < 12 ? 3 : 4
				this.current_type_info = this.type_list.find(item => item.level == this.userLevel) || this.type_list[0]
				this.type_list.forEach(item => {
					if (item.level == this.userLevel || item.level == 4) {
						item.status = 1
					} else {
						item.status = 0
					}
				})
			},
			// 获取学生或教师身份查询可用计划
			getPlanList() {
				var that = this;
				that.$http.getPlanList({
					'page': 1,
					'limit': 20,
					'gameFlag': 'JSPC'
				}).then(res => {
					if (res.code === 200) {
						res.data.forEach(item => {
							item.typeStr = this.planTypeList.find(p => p.key === item.type).value
						})
						that.plan_list = res.data;
					}
				})
			},
			changeTabFn(index) {
				this.activeTab = index
				this.activePlan = null
				this.current_type_info = {}
			},

			choosePlan(item, index) {
				this.activePlan = index
				this.currentPlanInfo = item
			},
			// 获取游戏配置信息
			getGameConfigInfo() {
				var that = this;
				that.$http.getGameConfigInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.game_config = res.data;
						that.people_num = that.game_config.default_people_num;
					}
				})
			},

			// 创建房间
			fnCreateRoom() {
				var that = this;
				if (this.activeTab === 0) {
					if (that.current_type_info && that.current_type_info.id) {
						this.errMsg = ''
					} else {
						this.errMsg = '请选择组别'
					}
				} else if (this.activeTab === 1) {
					if (this.activePlan === null) {
						this.errMsg = '请选择计划'
					} else {
						this.errMsg = ''
					}
				}
				if (!this.errMsg) {
					that.msg = "您正在创建【" + that.game_info.name + "】游戏，人数" + that.people_num + "人";
					that.showPromptbox = true
				} else {
					uni.showToast({
						title: this.errMsg,
						icon: 'none',
						duration: 2000
					})
				}

			},

			// 取消创建房间
			fnCancelCreate() {
				var that = this;
				uni.navigateBack();
			},

			// 确认创建
			confirmCreate() {
				var that = this;
				const params = {
					matchType: 'jspc', //极速拼词

					game_id: that.game_info.id,
					people_num: that.people_num,
					pwd: that.pwd,
					type_id: that.current_type_info.id,
					game_mode: that.game_mode,
					groupname: that.game_info.name + '|' + that.current_type_info.name
				}

				// 选择学习计划
				if (this.activeTab === 1) {
					params.plan_id = this.currentPlanInfo.id
					params.plan_name = this.currentPlanInfo.name
					params.plan_type = this.currentPlanInfo.type
				}

				that.$http.createRoom(params).then(res => {
					if (res.code === 200) {
						var group_info = res.data;
						uni.redirectTo({
							url: '/pages/games/jspc/game_jspc' +
								'?group_info=' + encodeURIComponent(JSON.stringify(group_info)) +
								'&game_mode=' + that.game_mode +
								'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info))
						})
					}
				})
			},

			fnSelectType(item, index) {
				var that = this;
				if (item.status == 0) {
					uni.showToast({
						title: '暂不可用',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				that.current_type_info = item;
			},

			// 改变人数
			changePeopleNum(e) {
				console.log(e)
			},

			eyeFn() {
				this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
			},

			cancelFn() {},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background-image: url(/static/image/app/gameBg.png);
		// background-color: #f7b52c;
		background-size: 100% auto;
		background-position: top left;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
		background-size: 100% 100%;
		font-family: hzgb;
		color: #fff;
	}

	.container {
		padding: 24px 14px;
	}

	.page-h1 {
		font-size: 24px;
	}

	.page-h3 {
		font-size: 16px;
		text-align: center;
		margin-bottom: 16px;
		margin-top: 40px;
	}

	.pwd-input {
		border: none;
		border-width: 0 !important;
		font-size: 14px;
		font-family: normal;
		text-align: center;

		&.uv-border {
			border-width: 0 !important;
		}
	}

	.pwd {
		width: 100%;
		height: 36px;
		background: #fff8e1;
		border-radius: 32px;
		box-sizing: border-box;
		padding-left: 8px;
		padding-right: 2px;
		margin-top: 40px;
		position: relative;

		.eye {
			position: absolute;
			right: 10px;
			top: 0;
			height: 30px;
			width: 30px;
			margin-top: 3px;
		}
	}

	// 创建房间页面，选择人数的滑块样式
	::v-deep .uni-slider-handle-wrapper {
		height: 14px !important;
		border-radius: 14px !important;
	}

	::v-deep .uni-slider-track {
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px;
	}

	.card {
		background: rgba(255, 255, 255, 0.15);
		border-radius: 14px;
		padding: 10px 10px 20px;
	}

	.slider_num {
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
	}

	.slider_btn {
		border: 2px solid #242018;
		background: linear-gradient(to bottom, #151004, #353330);
		height: 30px;
		width: 110px;
		text-align: center;
		line-height: 26px;
		border-radius: 30px;
		margin: 0 auto;
		font-size: 14px;
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 60px 0 40px;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;

		.btn {
			width: 140px;
			height: 40px;
			text-align: center;
			// line-height: 40px;
			padding-top: 6px;
			font-size: 16px;
			border-radius: 10px;
		}

		.btn1 {
			background: linear-gradient(to top, #130e00, #373632);
			box-shadow: 0 6px 0 0 #363531;
		}

		.btn2 {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0 6px 0 0 #d9b059;
			color: #000;
		}
	}

	.flex {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		overflow: hidden
	}

	.float {
		float: left;
		width: 50%;
		padding: 6px;
		box-sizing: border-box;
	}

	.level-item {
		background: rgba(255, 255, 255, 0.15);
		border: 3px solid transparent;
		border-radius: 14px;
		padding: 10px;
		text-align: center;
		font-size: 16px;
		display: flex;
		align-items: center;

		.level-icon {
			// background-image: url(/static/image/fengyongyanxuan/game-jspc.png);
			// background-size: contain;
			// background-position: center;
			// background-repeat: no-repeat;
			width: 60px;
			height: 60px;
			// margin-bottom: 12px;
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 6px;
			border: 2px solid transparent;

			.icon {
				width: 36px;
				height: 36px;
				margin-bottom: 8px;
			}
		}

		&.active {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border-color: #fde458;
			color: #000;

			.level-icon {
				background: linear-gradient(to bottom, #130e00, #373632);
				border-color: #31302d;
			}
		}
	}

	::v-deep .uni-input-input {
		text-align: center;
	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 16px;
		margin-top: 46px;

		.tab-item {
			font-size: 16px;
			border: 2px solid transparent;
			background: rgba(255, 255, 255, 0.15);
			width: 160px;
			height: 48px;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.activeTab {
			color: #000;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border-color: #fde458;
		}
	}

	.no_data {
		width: 100%;
		text-align: center;

		.img {
			width: 40%;
		}
	}

	.plan-item {
		width: 100%;
		background: rgba(255, 255, 255, 0.15);
		color: #fff;
		font-size: 18px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80px;
		border-radius: 80px 14px 14px 80px;
		margin-bottom: 10px;

		.plan-name {
			width: 72%;
		}

		.plan-en {
			text-align: center;
			font-size: 14px;
			font-family: normal;
		}

		&.active {
			color: #000;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border-color: #fde458;
		}
	}
</style>